<?php
	if (isset($_GET['lang'])) {
		$lang = $_GET['lang'];
	} else {
		$lang = 'FR';
	}
?>
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="./css/jquery.mobile-1.0.css" />
  
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="author" content="Vincent Volckaert" />
	<meta name="robots" content="all" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0" /> 

	<?php if ($lang=='FR'): ?>
	   <title>changerTout</title>
	<?php else: ?>
		<title>changeEverything</title>
	<?php endif; ?>
	
	<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.mobile-1.0.js"></script>
	<script type="text/javascript" src="js/jquery.tipTip.minified.js"></script>
	<script type="text/javascript" src="js/jquery.loader3.js"></script>
	<script type="text/javascript" src="js/buzz.js"></script>
	<script type="text/javascript" src="js/sound.js"></script>
	
	
	<script src="http://ui.jquery.com/latest/ui/jquery.effects.core.js"></script>
	<script src="http://ui.jquery.com/latest/ui/jquery.effects.slide.js"></script>
	
</head>

<body>
	<style type="text/css" media="all">		
		html { width: 100%; height: 100%;}
		body { width: 100%; height: 100%;}
		
		#contenuEN {
			width: auto;
			height: auto;
			padding-top:25px;
			overflow: hidden;
		}
		#contenuFR {
			width: auto;
			height: auto;
			padding-top:25px;
			text-align: right;
			overflow: hidden;
		}
	</style>
	
	<?php if ($lang=='FR') { ?>
		<style type="text/css" media="all">
			#contenuEN {
				display : none;
			}
			#btnEN {
				display : none;
			}
		</style>
	<?php } else { ?>
		<style type="text/css" media="all">
			#contenuFR {
				display : none;
			}
			#btnFR {
				display : none;
			}
		</style>
	<?php } ?>
	
	<div data-role="page" id="intro" data-theme="c">
		<div data-role="content" data-theme="c">
			<div style="float: left;" id="contenuFR">
				<?php 
					$synonymsFR = split(", ", "une aberration, une ânerie, une bavure, une boulette, une bourde, une bévue, une bêtise, un contresens, une coquille, un défaut, un écart, un égarement, une entorse, une étourderie, une extravagance, une faiblesse, une faute, un faux, un faux pas, une folie, une frasque, une fredaine, une gaffe, une hérésie, un impair, une incartade, un lapsus, une maladresse, un malentendu, un manquement, un mensonge, une mégarde, une méprise, un non-sens, une peccadille, un quiproquo, une mésinterprétation, un préjugé");
					$synFR = array_rand($synonymsFR, 10);
				?>
				J'ai fait
				<?php foreach($synFR as $syn): ?>
				<em><?php echo $synonymsFR[$syn]; ?></em>,<br/>
				<?php endforeach; ?>
				<em>une erreur</em>.</br>
				<div id="phraseFR">
					<strong  class="catchline">Si seulement je pouvais <em>changerTout</em>.</strong>
				</div>
			</div>
			<div style="float:right;" id="contenuEN">
				<?php 
					$synonymsEN = split(", ", "an aberration, a blunder, a boner, a delusion, an erratum, an error, a fault, a faux pas, an impropriety, an inaccuracy, an indiscretion, a lapse, a misapprehension, a miscalculation, a misconception, a misconstruction, a misinterpretation, a misjudging, a misprinting, a misunderstanding, a oversight, a slip, a slip-up, a solecism");
					$synEN = array_rand($synonymsEN, 10);
				?>
				I made 
				<?php foreach($synEN as $syn): ?>
					<em><?php echo $synonymsEN[$syn]; ?></em>,<br/>
				<?php endforeach; ?>
				<em>a mistake</em>.</br>
				<div id="phraseEN">
					<strong class="catchline">I wish I could just <em>changeEverything</em>.</strong>
				</div>
			</div>
		</div>
		<div data-role="footer" data-theme="c" style="position: fixed;bottom: 0;">
			<div class="ui-grid-a" id="btnFR">
				<div class="ui-block-a">
					<a href="http://m.changertout.fr/credit.php?lang=FR" rel="external" data-role="button" data-theme="c" data-transition="pop" style="width:100%"><h3>Crédits</h3></a>
				</div>
				<div class="ui-block-b">
					<a href="http://m.changertout.fr/index.php?lang=FR" rel="external" data-theme="c" data-transition="flip" data-role="button" style="width:100%"><h3>Commencer</h3></a>
				</div>
			</div>
			<div class="ui-grid-a" id="btnEN">
				<div class="ui-block-a">
					<a href="http://m.changertout.fr/credit.php?lang=EN" rel="external" data-role="button" data-theme="c" data-transition="pop" style="width:100%"><h3>Credits</h3></a>
				</div>
				<div class="ui-block-b">
					<a href="http://m.changertout.fr/index.php?lang=EN" rel="external" data-theme="c" data-transition="flip" data-role="button" style="width:100%"><h3>Start</h3></a>
				</div>
			</div>
		</div>
	</div> <!-- Fin intro -->
	
		<script type="text/javascript">
			var langueFR = true;
		
			$('#intro').ready(function(event){
				$('body').disableSelection();
				
				$('#contenuFR').swipeleft(function() {
					$('#contenuFR').hide("slide", { direction: "left" }, 1000, function(){
						$('#contenuEN').show("slide", { direction: "right" }, 1000);
					});
					$('#btnFR').fadeOut(1000, function(){
						$('#btnEN').fadeIn(1000);
					});
					langueFR=false;
				});
				
				$('#contenuEN').swiperight(function() {
					$('#contenuEN').hide("slide", { direction: "right" }, 1000, function(){
						$('#contenuFR').show("slide", { direction: "left" }, 1000);
					});
					$('#btnEN').fadeOut(1000, function(){
						$('#btnFR').fadeIn(1000);
					});
					langueFR=true;
				});
				
				var arrayPage = $('div[data-role|="page"]');
				for (var i = 0; i < arrayPage.length; i++) {
					$(arrayPage[i]).css('height','100%');
					var footer = $(arrayPage[i]).children('div[data-role|="footer"]');
					var content = $(arrayPage[i]).children('div[data-role|="content"]');
					if (footer) {
						$(footer).css('height','8%');
						$(content).css('height','87%');
					} else {
						$(content).css('height','95%');
					}
				}
			});
			
			jQuery.fn.extend({
				disableSelection: function () {
					return this.each(function () {
						this.onselectstart = function () {
							return false;
						};
						this.unselectable = "on";
						jQuery(this).css('user-select', 'none');
						jQuery(this).css('-o-user-select', 'none');
						jQuery(this).css('-moz-user-select', 'none');
						jQuery(this).css('-khtml-user-select', 'none');
						jQuery(this).css('-webkit-user-select', 'none');
					});
				}
			});
		</script>
</body>
</html>